<template>
  <div>
    <el-button
      @click="handleClick('manage')"
      :type="activeName == 'manage' ? 'primary' : ''"
    >
      题库管理
    </el-button>
    <el-button
      @click="handleClick('create')"
      :type="activeName == 'create' ? 'primary' : ''"
    >
      创建题库
    </el-button>
    <div class="wrap">
      <component :is="activeName" />
    </div>
  </div>
</template>
<script>
export default {
  components: {
    manage: () => import('./List.vue'),
    create: () => import('./Add.vue'),
  },
  computed: {
    activeName() {
      return this.$store.state.question.activeName
    },
  },
  mounted() {
    this.handleClick('manage')
  },
  methods: {
    handleClick(v) {
      this.$store.commit('SET_ACTIVENAME', v)
      this.$store.commit('SET_ACTIVEROW', {})
    },
  },
}
</script>
<style scoped lang="scss">
.wrap {
  padding: 20px 10px;
}
</style>